<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的藏酒</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm"/>
		<link rel="stylesheet" href="__STATIC__/css/flow.css">
		<style>
body, button, input, select, textarea {
    font-size: 14px;font-family: arial,微软雅黑;
}
.g-Total {
    background: #F4F4F4;border-bottom: 1px solid #DCDCDC; line-height: 30px;
    padding: 5px 10px 0; font-size: 14px;
}
a.gray9, .gray9 {color: #999;}
.g-member {background: #F4F4F4;padding: 10px 5px;}
.g-Recharge ul {zoom: 1;}
.g-Recharge li a.z-sel {
    border: 1px solid #F60; color: #666;
}
.g-Recharge li .z-initsel {
    border: 1px solid #F60;
}
.g-Recharge li .z-init {
    width: 90%;padding: 7px 0; text-align: center;border: none;
}
.g-Recharge li .z-initsel input {
    color: #666;
}
.g-Recharge li a.z-sel s, .g-Recharge li .z-initsel s {
    width: 18px;height: 18px;
    position: absolute; right: -1px; bottom: -1px;
    display: inline-block;background-position: 0 0;
}
.g-Recharge li:nth-child(3n-1) {
    width: 34%;text-align: center;
}
.g-Recharge li:nth-child(3n-3) {
    text-align: right;
}
.g-Recharge li {
    width: 33%;float: left;margin-bottom: 10px;
}
.g-pay-ment {
    overflow: hidden;
}
.m-round {
    border: 1px solid #DCDCDC;border-radius: 5px;
    background: #fff;box-shadow: 1px 1px 1px #e7e7e7;
}
.mt10 {
    margin-top: 10px;
}
.g-Recharge li a, .g-Recharge li .z-initsel, .g-Recharge li b {
    color: #959595;width: 90%;
    line-height: 30px;display: inline-block;
    background: #fff;border-radius: 5px;
    text-align: center;border: 1px solid #EAEAEA;
    box-shadow: 1px 1px 1px #EDEDED; position: relative;
}
.z-sel s, .z-initsel s, .z-Btn-Close b, .z-Btn-Rotation b, .z-Btn-del b, .z-Btn-ok b {
    background: url(__STATIC__/images/member-icon.png?v=130825);background-size: 40px auto;
}
.z-bank-Round {
    width: 16px;
    height: 16px;border: 1px solid #bbb;
    background: #fff;border-radius: 16px;
    display: inline-block;margin-right: 8px;
    box-shadow: 0 1px 1px #ccc inset;
}
.z-bank-Roundsel s {
    width: 12px;height: 12px;border-radius: 12px;display: inline-block;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ff8a00),color-stop(1,#f60));
}
.f-Recharge-btn {display: block;}
a.orgBtn {background: #f60;border: 1px solid #ef6000;}
.orgBtn {
    display: block; width: 100%;
    -webkit-box-sizing: border-box;
    height: 43px;line-height: 43px;
    text-align: center; color: #fff!important;
    border-radius: 5px;font-size: 18px;
}
.clearfix { display: block;}
.z-bank-Roundsel {
    width: 16px;height: 16px;line-height: 20px;border: 1px solid #ccc;background: #F6F5F5;
    border-radius: 16px;display: inline-block;text-align: center;margin-right: 8px;
}
.g-pay-ment li {
    line-height: 36px;border-top: 1px dotted #CBCBCB;max-height: 40px;
    padding: 0 10px;overflow: hidden;margin-top: -1px;
}
.clearfix:after {
    content: ".";display: block;height: 0;clear: both;visibility: hidden;
}
.orange {color: #f60;}
.pay_fs{width:100%;margin-top: 0.8em;background: #fff;padding: 0.5em;}
.pay_fs_tit{width:100%;height:2em;line-height:2em;color: #333;}
.pay_fs ul{width:100%;margin-top: 0.5em;}
.pay_fs ul li{width:100%;height: 3em;line-height: 3em;}
.pay_fs ul li input{width:1em;float: left;margin-top: 10px !important;}
.pay_fs ul li span{margin-left: 0.6em;height: initial;margin: initial;line-height: initial;}
</style>
	</head>

	<body>
		<header class="mui-bar white mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title black_m fs_xl">延长托管</h1>
		</header>
		<div class="mui-content">
		<form method="post"  id="recharge_form" action="{:U('Mobile/Payment/cellar_years_pay')}">
			<div class="mui-content fs_xl">
				<div class="yanc">
					<label><em>*</em>延长托管时间：</label>
<!-- 					<span style="display:inline-block" class="yy_dc_t" data-options='{"type":"date","beginYear":2012,"endYear":2100}'><input style="width:100%;" class="fs_m" type="text" placeholder="选择时间（每升每年2元）" /></span> -->
					<div class="mui-numbox" data-numbox-min='1' style="margin-left: 0.6em;">
						<button id="btn2" class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						<input id="box" class="mui-input-numbox" type="number" />
						<button id="btn1" class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
				<div class="pay_fs">
					<div class="pay_fs_tit fs_l">选择支付方式</div>
					<ul>
					<foreach name="paymentList" item="v"  key="k"> 
	                    <li class="clearfix cls" name="payment_name">
	                        <input type="radio"  value="pay_code={$v['code']}" class="c_checkbox_t" name="pay_radio" <if condition="$order[pay_code] eq $v[code]">checked<else /><if condition="$v['code'] == weixin">checked</if></if> />
	                        <span class="fl shipping_title">
	                         	<img src="/plugins/{$v['type']}/{$v['code']}/{$v['icon']}" onClick="change_pay(this);" width="110" height="40" />
	                        </span>
	                   </li>
                    </foreach> 
                    </ul>
				</div>
<!-- 				<input type="radio" hidden="hidden"  value="pay_code=weixin" class="c_checkbox_t" name="pay_radio"/> -->
				<div class="yanc_pri">
					<a id="pay" href="javascript:void(0)">需支付<em>¥</em><span id="price">{$residue_weight_year}</span>.00</a>
				</div>
				<input type="hidden" name="cellar_years"  id="cellar_years" value="1"/>
				<input type="hidden" name="account" id="account" value="{$residue_weight_year}"/>
				<input type="hidden" name="rec_id"  value="{$rec_id}"/>
				<input type="hidden" name="id"  value="{$id}"/>
				<input type="hidden" name="type"  value="{$type}"/>
			</div>
		</form>
		</div>
		<script type="text/javascript">
			$(function() {
				$("#pay").click(function(){
					var price = $("#price").text();
					if(price){
						$("#account").val(price);
						$("#cellar_years").val($("#box").val());
						$("#recharge_form").submit();
					}else{
						alert("请选择正确的延长时间");
					}
				});
				
				$("#box").change(function(){
					$("#price").text($(this).val()*2*{$residue_weight});
				});
			});
			function change_pay(obj)
			{
			    $(obj).parent().siblings('input[name="pay_radio"]').trigger('click');
			}
			
			
			document.getElementById("btn1").addEventListener('tap', function(event){
				var aa=document.getElementById("box").value;
			});
		</script>
		<script>
			(function($) {
				$.init();
				var result = $('.yy_dc_t')[0];
				var btns = $('.yy_dc_t');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{"type":"date"}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							result.innerText = rs.text;
							calculate(rs.text);
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			
			function calculate(date){
				var rec_id = {$rec_id};
				$.ajax({
					type:"POST",
					url:"/Mobile/User/cellar_years_add",
					data:{"id":rec_id,'date':date},
					dataType:"json",
					async:false,//同步操作
					success:function(data){
						if(data.status == 0){
							alert(data.msg);
							$("#price").text("");
						}else{
							$("#price").text(data.data.price);
							$("#cellar_years").val(data.data.years);
							$("#account").val(data.data.price);
						}
					}
				});
			}
		</script>
	</body>

</html>